<!--
 * @Descripttion: 欠薪投诉页面
 * @version: 
 * @Author: zhangfan
 * @email: 2207044692@qq.com
 * @Date: 2020-12-09 10:35:12
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-03-08 09:26:49
-->
<template>
  <div class="container" ref="mainCon">
    <topTitle :titleText="titleText"></topTitle>
    <div class="mainCon" style="padding-top: 0">
      <!-- 列表 -->
      <div
        ref="tableBox"
        :class="hiddleToolBar ? 'tableBoxCur tableBox' : 'tableBoxCur'"
      >
        <el-table
          ref="tableBox1"
          :max-height="tableHeight"
          :data="tableData"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          v-loading="loading"
          highlight-current-row
          stripe
          style="border: 1px solid #dfe6ec"
        >
          <el-table-column
            label="序号"
            type="index"
            width="80px"
            align="center"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="provinceName,cityName,countyName"
            label="所在区域"
          >
            <template slot-scope="scope">
              {{ scope.row.provinceName || '-' }}
              {{ scope.row.cityName || '-' }} {{ scope.row.countyName || '-' }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="complaintName"
            label="拖欠工资单位名称"
          >
            <template slot-scope="scope">
              <p>{{ scope.row.complaintName || '-' }}</p>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="managerName" label="负责人姓名">
            <template slot-scope="scope">
              <p>{{ scope.row.managerName || '-' }}</p>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="address"
            label="拖欠工资单位地址"
          >
            <template slot-scope="scope">
              <p>{{ scope.row.address || '-' }}</p>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="tel" label="单位电话">
            <template slot-scope="scope">
              <p>{{ scope.row.tel || '-' }}</p>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="name" label="反映人">
            <template slot-scope="scope">
              <p>{{ scope.row.name || '-' }}</p>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="perTel" label="反映人电话">
            <template slot-scope="scope">
              <p>{{ scope.row.perTel || '-' }}</p>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="idcard" label="反映人身份证号">
            <template slot-scope="scope">
              <p>{{ scope.row.idcard || '-' }}</p>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="backPayCount" label="欠薪人数">
            <template slot-scope="scope">
              <p>{{ scope.row.backPayCount || '-' }}</p>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="backPayTotal" label="欠薪金额">
            <template slot-scope="scope">
              <p>{{ scope.row.backPayTotal || '-' }}</p>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="complaintYear,complaintMonth"
            label="欠薪始发时间"
          >
            <template slot-scope="scope">
              {{ scope.row.complaintYear || '-' }}年{{
                scope.row.complaintMonth || '-'
              }}月
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="complaintRemark"
            label="欠薪基本情况摘要"
          >
            <template slot-scope="scope">
              <p>{{ scope.row.complaintRemark || '-' }}</p>
            </template>
          </el-table-column>
          <!-- 表格数据为空时，页面显示 -->
          <div slot="empty" v-show="isShow">
            <emptyTable emptyText="暂无相关信息"></emptyTable>
          </div>
        </el-table>
        <!-- filterField为搜索条件 -->
        <Pagination
          ref="pagination"
          @getList="getTableList"
          :filterField="filterField"
          :requestUrl="requestUrl"
          @getpageSize="getpageSize"
          @getpageNo="getpageNo"
        ></Pagination>
      </div>
    </div>
  </div>
</template>
<script>
import scrollTable from '@/mixin/scrollTable.js'
export default {
  name: 'settledEnterprise',
  mixins: [scrollTable],
  data() {
    return {
      requestUrl: 'api-r/rightbackpay/expand/list', //表格请求路径
      tableData: [], //表格数据
      filterField: {},
      pageSize: 20,
      pageNo: 1,
      titleText: '欠薪投诉',
      isShow: false, //列表加载
      loading: true,
    }
  },
  created() {
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData()
    })
  },
  activated() {
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData(this.pageNo, this.pageSize)
    })
  },
  methods: {
    getpageSize(val) {
      this.pageSize = val
    },
    getpageNo(val) {
      this.pageNo = val
    },
    getTableList(data) {
      this.tableData = data
      this.loading = false
      if (this.tableData.length < 1) {
        this.isShow = true
      }
    },
    //列表查询
    searchTable() {
      this.$refs.pagination.getTableListData()
    },
  },
}
</script>

<style scoped lang="less">
.container {
  .toDownload {
    font-size: 14px;
    color: #0070f5;
    cursor: pointer;
  }
  .mainCon {
    top: 116px;
  }
  .mainCon {
    top: 198px;
  }
}
@media screen and (min-width: 1280px) and (max-width: 1366px) {
  .searchInputWidth /deep/.el-form-item__label {
    width: 96px;
  }
}
</style>
